<template>
  <div>
    <el-form
      size="mini"
      :model="labelForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="运单类型" prop="waybillType">
        <el-radio-group
          v-model="labelForm.waybillType"
          @change="changeWaybillType"
        >
          <el-radio :label="parseInt(0)" class="margin-left">
            海运
          </el-radio>
          <el-radio :label="parseInt(1)">
            空运
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="国家" prop="countryId">
        <el-select
          v-model="labelForm.countryId"
          placeholder="请选择"
          @change="changeCountry"
        >
          <el-option
            v-for="(key, value) in countrySource"
            :key="value"
            :label="key"
            :value="parseInt(value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="派送方式" prop="deliveryType">
        <el-radio-group
          v-model="labelForm.deliveryType"
          @change="changeDeliveryType"
        >
          <el-radio :label="parseInt(1)" class="margin-left">
            快递派
          </el-radio>
          <el-radio :label="parseInt(2)">
            卡派
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="目的仓库" prop="stockList">
        <el-select
          v-model="labelForm.stockList"
          multiple
          placeholder="请选择"
          @change="changeStockList"
        >
          <el-option
            v-for="(key, value) in endDelLabelStockSource"
            :key="value"
            :label="key"
            :value="parseInt(value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="国内分区" prop="partitionList">
        <el-select
          v-model="labelForm.partitionList"
          multiple
          placeholder="请选择"
          @change="changePartitionList"
        >
          <el-option
            v-for="(key, value) in countryStateNameSource"
            :key="value"
            :label="key"
            :value="parseInt(value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="showOther" label="打单账号" prop="shippingAccountId">
        <el-select
          v-model="labelForm.shippingAccountId"
          placeholder="请选择"
          @change="changeShippingAccount"
        >
          <el-option
            v-for="(key, value) in endDelLabelShippingAccountSource"
            :key="key"
            :label="key"
            :value="parseInt(value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="showOther" label="末端标签" prop="endLabelType">
        <el-input v-model="labelForm.endLabelType" disabled></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { m } from "@/store/yg/common/local";
export default {
  data() {
    return {
      labelForm: {
        waybillType: 0,
        deliveryType: 1,
        countryId: "",
        stockList: [],
        partitionList: [],
        shippingAccountId: "",
        endLabelType: ""
      },
      showOther: true,
      rules: {
        waybillType: [
          { required: true, message: "请选择运单类型", trigger: "change" }
        ],
        countryId: [
          { required: true, message: "请选择国家", trigger: "change" }
        ],
        deliveryType: [
          { required: true, message: "请选择派送方式", trigger: "change" }
        ],
        shippingAccountId: [
          { required: true, message: "请选择打单账号", trigger: "change" }
        ]
      },
      countrySource: {},
      endDelLabelStockSource: {},
      countryStateNameSource: {},
      endDelLabelShippingAccountSource: {}
    };
  },
  mounted() {
    this.init();
    const arr = this.$store.state.auth.user.roleIds;
    for (let i of arr) {
      if (i === 22) {
        // 空运操作
        this.labelForm.waybillType = 1;
      } else if (i === 20) {
        // 海运操作
        this.labelForm.waybillType = 0;
      }
    }
    console.log("this.$store.state.edit.row :>> ", this.$store.state.edit.row);
    this.countrySource = this.$store.state.edit.entry.sources["countrySource"];
    this.endDelLabelStockSource = this.$store.state.edit.entry.sources[
      "endDelLabelStockSource"
    ];
    this.countryStateNameSource = this.$store.state.edit.entry.sources[
      "countryStateNameSource"
    ];
    this.endDelLabelShippingAccountSource = this.$store.state.edit.entry.sources[
      "endDelLabelShippingAccountSource"
    ];
  },
  methods: {
    init() {
      console.log("this.labelForm :>> ", this.labelForm);
      if (this.$store.state.edit.row.id) {
        const row = this.$store.state.edit.row;
        console.log("waybillType :>> ", row.waybillType);
        console.log("deliveryType :>> ", row.deliveryType);
        this.labelForm.countryId = row.countryId;
        this.labelForm.deliveryType = row.deliveryType;
        this.labelForm.partitionList = row.partitionList;
        this.labelForm.shippingAccountId = row.shippingAccountId;
        this.labelForm.stockList = row.stockList;
        this.labelForm.waybillType = row.waybillType;
        var str = this.$store.state.edit.entry.sources[
          "endDelLabelShippingAccountSource"
        ][row.shippingAccountId];
        this.labelForm.endLabelType = str.substring(
          str.indexOf("(") + 1,
          str.length - 1
        );
      } else {
        this.$store.state.edit.row["waybillType"] = this.labelForm.waybillType;
        this.$store.state.edit.row[
          "deliveryType"
        ] = this.labelForm.deliveryType;
      }
    },
    // 更改运单类型
    changeWaybillType(val) {
      console.log("val :>> ", val);
      this.$store.state.edit.row["waybillType"] = val;
    },
    // 更改国家
    changeCountry(val) {
      console.log("val :>> ", val);
      this.$store.state.edit.row["countryId"] = val;
    },
    // 更改派送方式
    changeDeliveryType(val) {
      console.log("val :>> ", val);
      this.$store.state.edit.row["deliveryType"] = val;
      if (val === 1) {
        this.showOther = true;
      } else {
        this.showOther = false;
      }
    },
    // 更改目的仓库
    changeStockList(val) {
      console.log("val :>> ", val);
      this.$store.state.edit.row["stockList"] = val;
    },
    // 更改国内分区
    changePartitionList(val) {
      console.log("val :>> ", val);
      this.$store.state.edit.row["partitionList"] = val;
    },
    // 更改打单账号
    changeShippingAccount(val) {
      var str = this.$store.state.edit.entry.sources[
        "endDelLabelShippingAccountSource"
      ][val];
      console.log(
        "this.labelForm.shippingAccountId :>> ",
        this.labelForm.shippingAccountId
      );
      console.log(
        "this.labelForm.endLabelType :>>  ",
        str.substring(str.indexOf("(") + 1, str.length - 1)
      );
      this.$store.state.edit.row[
        "shippingAccountId"
      ] = this.labelForm.shippingAccountId;
      this.labelForm.endLabelType = str.substring(
        str.indexOf("(") + 1,
        str.length - 1
      );
      this.$store.state.edit.row["endLabelType"] = this.labelForm.endLabelType;
    }
  }
};
</script>

<style scoped>
/deep/ .el-input,
.el-select {
  width: 100%;
}
</style>
